<script setup lang="ts">
import { h, ref, render } from 'vue'
import { NAvatar, NTag, NSpace, NIcon, NButton } from 'naive-ui'
import { PlayerPlay, Bug, Copy, DotsVertical } from '@vicons/tabler'

interface Props {
  avatarSrc: string
  name: string
  author: string
  description: string
  createdAt: string
  executionCount: number
  type: number
}

const props = withDefaults(defineProps<Props>(), {
  avatarSrc: '',
  name: '',
  author: 'aa',
  description: '',
  createdAt: '',
  executionCount: 0,
  type: 1
})

// 转换Type为短语
const getToolType = (value: number) => {
  switch (value) {
    case 1:
      return 'API'
    case 2:
      return 'Py'
    case 3:
      return 'Js'
    default:
      return 'API'
  }
}
const getToolTypeColor = (value: number) => {
  switch (value) {
    case 1:
      return '#48c78e'
    case 2:
      return '#3b82f6'
    case 3:
      return '#f6ad55'
    default:
      return ''
  }
}

const handleActionSelect = (key: string) => {
  if (key === 'copy') {
    console.log('copy')
  } else if (key === 'delete') {
    console.log('delete')
  }
}

const options = [
  {
    label: '复制工具',
    key: 'copy',
    icon: () => h(NIcon, null, { default: () => h(Copy) })
  },
  {
    label: '删除工具',
    key: 'delete',
    props: {
      style: 'color: red;'
    },
    icon: () =>
      h(
        NIcon,
        {
          class: 'color-red'
        },
        { default: () => h(Bug) }
      )
  }
]
</script>
<template>
  <FlexibleCard
    class="app-item"
    :avatarSrc="props.avatarSrc"
    :name="props.name"
    :subtitle="`作者：${props.author}`"
    :description="props.description"
    :footerLeft="`执行次数：${props.executionCount}`"
    :footerRight="`创建时间：${props.createdAt}`"
    :badgeText="getToolType(props.type)"
    :badgeColor="getToolTypeColor(props.type)"
    :isActionHover="true"
  >
    <template #action>
      <n-Dropdown :options="options" @select="handleActionSelect">
        <n-button text size="small">
          <n-icon size="20"> <DotsVertical /> </n-icon>
        </n-button>
      </n-Dropdown>
    </template>
  </FlexibleCard>
</template>
<style scoped lang="scss">
// Variables
$primary-color: #155aef;
$bg-color: white;
$text-color: #333;
$gray-color: #808080;
$light-gray: #f5f5f5;
$border-radius: 8px;

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin hover-effect {
  transition: all 0.3s ease;
  &:hover {
    background-color: rgba($primary-color, 0.08);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

.project-footer {
  border-radius: $border-radius;
  display: flex;
  justify-content: space-between;
  flex: 1;
  .project-execution {
    display: flex;
    align-items: center;
    .project-execution-count {
      font-size: 12px;
      color: $gray-color;
    }
    .project-execution-time {
      font-size: 12px;
      color: $gray-color;
    }
  }
}
</style>
